<template>
    <div style="height:100vh;overflow: hidden;background: #009688;">
        <div style="width:500px;height:400px;background-color:white;border-radius:10px;
            margin: 150px auto;padding: 50px;">
            <div style="margin:30px;text-align:center;font-size:30px;font-weight:bold;  color:dodgerblue">登 录</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号" prop="act">
                    <el-input v-model="ruleForm.act" prefix-icon="el-icon-user" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="ruleForm.pwd" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                <el-button style="width:30%" type="primary" size="medium" @click="submitForm('ruleForm')">登录</el-button>
                <el-button style="width:30%" type="primary" size="medium" @click="resetForm('ruleForm')">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import request from '@/utils/request';
import Cookies from 'js-cookie'
export default {
    name:'Login',
    data(){
        return {
            ruleForm: {
                act:'',
                pwd:''
            },
            rules: {
                act: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 发送请求
            this.login()
            // 发送请求
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$router.push('/register')
      },
      login(){
        request.post('/api/page/settings/admin/tologin.do',{
            act:this.ruleForm.act,
            pwd:this.ruleForm.pwd
        }).then(res=>{
            if(res.code==="1"){
                // console.log(res.data)
                Cookies.set('admin',JSON.stringify(res.data))
                this.$notify.success('登录成功')
                this.$router.push('/')
            }else{
                this.$notify.error(res.message)
            }
        })
      }
    }
}
</script>

<style>

</style>